<!-- Dom模板 -->
<template>
    
  <div class="circle">
        <!-- Dom内容 -->
        
    <div class="circlebox">
      <div class="circle_head">
        <p class="iconfont icon-iconfontyoujiantou-zuo" @click="close"></p>
        <h3>圈子</h3>
      </div>
      <div class="circle_List">
        <div v-for="(item, index) in circle" :key="index" class="circleList">
          <div class="left">
            <img :src="item.user_img" alt="" />
          </div>
          <div class="content">
            <p>{{ item.circle_modelname }}</p>
          </div>
          <div class="right">
            <p @click="noguanzhu(item)">取消关注</p>
          </div>
        </div>
      </div>
    </div>
      
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  data() {
    return {
      msg: "测试",
      circle: [],
      cont: "",
      arr: [],
    };
  }, // 生命周期 - 创建完成（访问当前this实例）
  created() {}, // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    if (sessionStorage.getItem("userId")) {
      this.$store.dispatch("login/getUser", {
        userid: sessionStorage.getItem("userId"),
      });
      this.circle = this.$store.state.login.loginuserMsg.circle.cont;
    } else {
      this.circle = [];
    }
  }, // Vue方法定义
  methods: {
    close() {
      this.$parent.back();
    },
    // 取关
    noguanzhu(item) {
      console.log(item);
      this.$store
        .dispatch("social/circleContact", {
          type: "del",
          from_userid: sessionStorage.getItem("userId"),
          modelid: item.modelid,
        })
        .then((res) => {
          this.$store
            .dispatch("login/getUser", {
              userid: sessionStorage.getItem("userId"),
            })
            .then((res) => {
              console.log(res);
              this.circle = this.$store.state.login.loginuserMsg.circle.cont;
            });
        });
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
.circle {
  width: 100vw;
  height: 100vh;
  background: white;
}
.circlebox {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.02);
}
.circle_head {
  width: 100%;
  height: 1.466667rem;
  background: #f33a65;
  color: white;
  padding-top: 0.4rem;
  margin-bottom: 0.533333rem;
  position: relative;
}
.circle_head p {
  font-size: 0.746667rem;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  line-height: 1.6rem;
}
.circle_head h3 {
  width: 100%;
  font-size: 0.586667rem;
  line-height: 0.826667rem;
  text-align: center;
}
.circle_List {
  width: 100vw;
  height: calc(100vh - 1.466667rem);
  overflow-y: auto;
}
.circleList {
  width: 100%;
  height: 1.6rem;
  background-color: white;
  margin-bottom: 0.266667rem;
  box-shadow: 0px 0.053333rem 0.16rem 0rem rgb(0 0 0 / 1%);
}
.circleList .left {
  width: 2.666667rem;
  height: 100%;
  line-height: 1.6rem;
  margin-left: 0.533333rem;
  float: left;
  font-size: 0.533333rem;
  font-family: "PingFangSC-bold";
}
.circleList .right {
  margin-right: 0.266667rem;
  width: calc(100vw - 6.5rem);
  height: 100%;
  float: right;
  font-size: 0.426667rem;
  position: relative;
}
.circleList .right p {
  text-align: center;
  width: 1.866667rem;
  height: 0.746667rem;
  line-height: 0.746667rem;
  border-radius: 0.373333rem;
  font-size: 0.373333rem;
  background: #f33a65;
  color: white;
  margin-top: 0.453333rem;
}
.circleList .content {
  width: 2.666667rem;
  height: 100%;
  float: left;
  font-size: 0.48rem;
}
.content p{
  line-height: 1.6rem;
}
.circleList .right span {
  font-size: 0.373333rem;
  color: #aaa;
}
.circleList .right > p:last-of-type {
  float: right;
}
.circleList .left img {
  width: 1.6rem;
  height: 100%;
  border-radius: 50%;
  margin-right: 0.533333rem;
}
</style>